<template>
	<view class="float">
<!-- 		<view class="item" @click="onClickPublish">
			<uni-icons type="plus" size="35" color="#888"></uni-icons>
		</view> -->
		<view class="item" @click="onTop">
			<uni-icons type="arrow-up" size="26" color="#888"></uni-icons>
		</view>
	</view>
	
	<uni-fab
		:pattern="pattern"
		:content="content"
		horizontal="left"
		vertical="bottom"
		direction="horizontal"
		@trigger="trigger"
	></uni-fab>
	
	<uni-popup ref="DriverPopup" type="bottom">
		<view class="publishPopup">
			<view class="popHeader">
				<view class=""></view>
				<view class="title">发布行程：寻找乘客</view>
				<view class="close" @click="clickPublishClose">
					<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
				</view>
			</view>
			<scroll-view scroll-y>
				<view class="content">
					<view class="row contentTop">
						<!-- <view class="laber">行程类型：</view> -->
						<view class="tripType">
							<view class="laber">早晚</view>
							<uni-data-select v-model="tripType" :localdata="tripRange" @change="tripTypeChange"></uni-data-select>																			
						</view>					
					</view>
					<view class="row">
						<view class="laber">起点：</view>
						<input class="value" v-model="pickupPoint" placeholder="如:凤岗C口" />
						<!-- <view class="value">科慧花园</view> -->
					</view>
					<view class="row">
						<view class="laber">终点：</view>
						<input class="value" v-model="pickupPoint" placeholder="如:黄埔大道高速出口" />
						<!-- <view class="value">凯华国际</view> -->
					</view>
					<view class="row">
						<view class="laber">途径点：</view>
						<view class="value tabs">
							<view class="tab">科慧北区</view>
							<view class="tab">科慧中区</view>
							<view class="tab">凤岗C口</view>
							<view class="tab">中新地铁站</view>
						</view>
					</view>
					<view class="row">
						<view class="laber">报价范围：</view>
						<view class="value tabs">
							<view class="tab">15元</view>
							<view class="tab">20元</view>
						</view>
					</view>
					<view class="row">
						<view class="laber">给ta捎句话：</view>
						<view class="value tabs" v-for="item in selectTagsText" :key="item.key">
							<view class="tab">{{item.text}}</view>
						</view>
					</view>
					<view class="row">
						<view class="laber">车牌号：</view>
						<view class="value">粤A-12345</view>
					</view>
					<view class="row">
						<view class="laber">联系电话：</view>
						<view class="value">13266668888</view>
					</view>
					<view class="copyRight">
						温馨提醒：<br>
						·车主确认行程前，车牌及手机号隐私信息将不会被乘客可见；<br>
						·请车主开启通过手机号加微信好友的功能，乘客确认同行后，将会通过手机号添加您的微信；<br>
						·每位用户仅支持发布两条有效的拼车单，如果超出数量请删除历时的发布拼车信息<br>
					</view>
					<view class="disclaimer">
						<input class="input" type="checkbox" :v-model="agreed" @click="onClickRadio"/>
						<navigator url="/pages/disclaimer/disclaimer">
							<text class="value">《我已阅读并同意免责声明》</text>						
						</navigator>   					
						
					</view>
					<button class="submit-button" disabled @click="submit">发布帖子</button>
					
				</view>
			</scroll-view>

		</view>
	</uni-popup>
	
	
	<uni-popup ref="PassengerPopup" type="bottom">
		<view class="publishPopup">
			<view class="popHeader">
				<view class=""></view>
				<view class="title">发布行程：寻找司机</view>
				<view class="close" @click="clickPublishClose">
					<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
				</view>
			</view>
			<scroll-view scroll-y>
				<view class="content">
					<view class="row contentTop">
						<!-- <view class="laber">行程类型：</view> -->
						<view class="tripType">
							<view class="laber">早晚：</view>
							<uni-data-select v-model="tripType" :localdata="tripRange" @change="tripTypeChange"></uni-data-select>																			
						</view>
					
					</view>
					<view class="row">
						<view class="laber">上车点：</view>
						<view class="value">科慧花园</view>
					</view>
					<view class="row">
						<view class="laber">下车点：</view>
						<view class="value">凯华国际</view>
					</view>
					<view class="row">
						<view class="laber">同行报价：</view>
						<view class="value tabs">
							<view class="tab">微信私聊</view>
							<view class="tab">15元</view>
							<view class="tab">可小加</view>
						</view>
					</view>

					<view class="row">
						<view class="laber">给ta捎句话：</view>
						<view class="value tabs" v-for="item in selectTagsText">
							<view class="tab">{{item.text}}</view>
<!-- 							<view class="tab">有行李</view>
							<view class="tab">准时出发</view>
							<view class="tab">可长期结伴</view> -->
						</view>
					</view>
					<view class="copyRight">
						温馨提醒：
						·每位乘客仅支持发布两条有效的拼车单，如果超出数量请删除之前的拼车单<br>
						·请乘客开启通过手机号加微信好友的功能，乘客确认同行后，将会通过手机号添加您的微信；<br>
						
					</view>
					
					<view class="disclaimer">
						<input class="input" type="checkbox" :v-model="agreed" @click="onClickRadio"/>
						<navigator url="/pages/disclaimer/disclaimer">
							<text class="value">《我已阅读并同意免责声明》</text>						
						</navigator>   					
						
					</view>
					<button class="submit-button" disabled @click="submit">发布帖子</button>
					
				</view>
			</scroll-view>
		</view>
	</uni-popup>
	
</template>

<script setup>
import { ref } from 'vue';
import {DriverTags, PassengeTags, ReferPrice} from "@/common/js/common-const.js"

const pickupPoint = ref()
const DriverPopup = ref(null)	// 点击发布行程
const PassengerPopup = ref(null)
const tripType = ref(0)
const tripRange = ref([
	{ value: 0, text: "上班" },
	{ value: 1, text: "下班" },
])

const publishType = ref(null)	// 悬浮按钮行程发布类型
const agreed = ref(false)		// 免责按钮
const selectTagsText = ref([])		// 选中的tag文案列表
const BaseTagsDict = ref([])		// 用于映射tags的字典
const selectTagIds = ref([			// 选中的tagId
	"100", "103"
])

const transTagsText = function(){
	selectTagsText.value = BaseTagsDict.value.filter(({key, text})=>{
		return selectTagIds.value.includes(key);
	})
}


const content = ref(
	[{
			iconPath: '/static/images/publish-car-active.png',			
			selectedIconPath: '/static/images/publish-car-active.png',
			text: '我是司机',
			active: false
		},
		{
			iconPath: '/static/images/publish-user-active.png',
			selectedIconPath: '/static/images/publish-user-active.png',
			text: '我是乘客',
			active: false
		}
	]
)

const pattern = ref({
	color: '#7A7E83',
	backgroundColor: '#fff',
	selectedColor: '#32CD99',
	buttonColor: '#32CD99',
	iconColor: '#fff',

})

//点击提交按钮
const submit = function(){
	
}

// 点击免责按钮
const onClickRadio = function(e){
	console.log(agreed.value);
	console.log(e);
}

// 点击悬浮按钮，获取用户选项
const trigger = function(res){
	publishType.value = res.index;
	console.log(res.index);
	if(res.index === 0){
		DriverPopup.value.open();	// 拉起寻找乘客的窗口
		BaseTagsDict.value = DriverTags;
	}else if(res.index === 1){
		PassengerPopup.value.open();// 拉起寻找车主的窗口
		BaseTagsDict.value = PassengeTags
	}
	transTagsText()
	// console.log(DriverTags);
	// console.log(PassengeTags);
}


// const tripType = switchBtn.value? "上班顺路": "下班顺路"
const tripTypeChange = function(index){
	console.log(
		tripRange.value[index]
	);
}

const onClickPublish = function(){
	publishPopup.value.open();
}	

const clickPublishClose = function(){
	if(publishType.value === 0){
		DriverPopup.value.close();
	}else if(publishType.value === 1){
		PassengerPopup.value.close();
	}
}
	
//点击回到顶部
const onTop = ()=>{
	uni.pageScrollTo({
		scrollTop:0,
		duration:100
	})
}	

</script>

<style lang="scss" scoped>
.float{
	position: fixed;
	right: 50rpx;
	// bottom: 160rpx;
	// 隔开安全区域
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 200;
	.item{
		width: 90rpx;
		height: 90rpx;
		background: rgba(255,255,255,0.5);
		border-radius: 50%;
		margin-bottom: 20rpx;
		// 居中
		display: flex;
		align-items: center;
		justify-content: center;
		
		// 增加边框
		border: 1px solid #eee;
	}

}
.popHeader{		// 从infoPupop提取到外层，便于评分弹窗共用样式
	display: flex;
	justify-content: space-between;
	align-items: center;
	.title{
		color: $text-font-color-2;
		font-size: 40rpx;
		font-weight: 400;
	}
	.close{
		padding: 6rpx;
	}
}


.publishPopup{
	background:
	linear-gradient(to bottom, transparent, #fff 400rpx),
	linear-gradient(to right, #A8DADC 40%, #FADADD);
	padding: 30rpx;
	border-radius: 30rpx 30rpx 0 0;
	overflow: hidden;
	
	scroll-view{
		max-height: 60vh;
		padding-bottom: 100rpx;
		.content{
			.row{
				display: flex;
				padding: 16rpx 0;
				font-size: 32rpx;
				line-height: 1.7em;
				.label{
					color: $text-font-color-3;
					width: 140rpx;
					text-align: right;
					font-size: 30rpx;
				}
				.value{
					color: $text-font-color-3;
					flex: 1;
					width: 0;
				}
				.tabs{
					display: flex;
					flex-wrap: wrap; 	// 自动换行
					.tab{
						border: 1px solid $brand-theme-color;
						color: $brand-theme-color;
						font-size: 22rpx;
						padding: 10rpx 30rpx;
						border-radius: 40rpx;
						line-height: 1em;
						margin: 0 10rpx 10rpx 0;
					}
				}	
			}
			.contentTop{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.tripType{
					padding-left: 0;					
					display: flex;
					justify-content: space-between;
					align-items: center;
					.label{
						margin-bottom: 30rpx;
					}
				}
			}
			
			.disclaimer{
				display: flex;
				// justify-content: center;
				// align-items: center;
				navigator{
					.input{
						padding-left: 0rpx;
					}
					.value{
						color: blue;
					}
				}
			}
			.submit-button{
				width: 220rpx;
				background-color: #40A8C4;
				color: #fff;
				padding: 10px 20px;
				border: none;
				border-radius: 5px;
				cursor: pointer;
				font-size: 1em;
			}
		}
		.copyRight{
			font-size: 28rpx;
			padding: 20rpx;
			background: #f6f6f6;
			color:  $text-font-color-3;
			border-radius: 20rpx 0;
			margin: 20rpx 0;
			line-height: 1.6em;
		}		
	}
}
</style>